<template>
  <el-dialog
    title="修改单位信息"
    width="40%"
    top="30px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :visible.sync="visible"
  >
    <el-form label-width="100px" :model="orgData" :rules="rules" ref="form">
      <el-form-item label="LOGO">
        <upload-oss
          single-image
          ref="upload"
          accept="image/*"
          :on-complete="handleComplete"
          :file-list="fileList"
        ></upload-oss>
      </el-form-item>
      <el-form-item label="单位名称" prop="orgName">
        <el-input v-model="orgData.orgName"></el-input>
      </el-form-item>
      <el-form-item label="单位简称" prop="orgNameShort">
        <el-input v-model="orgData.orgNameShort"></el-input>
      </el-form-item>
      <el-form-item label="单位代码" prop="orgCode">
        <el-input v-model="orgData.orgCode" placeholder="单位简称代码"></el-input>
      </el-form-item>
      <el-form-item label="公司负责人" prop="realName">
        <el-input v-model="orgData.realName"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input v-model="orgData.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="addressCode">
        <select-address class="w-100" auto-top v-model="orgData.addressCode"></select-address>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="orgData.addressDetail"></el-input>
      </el-form-item>
      <el-form-item label="开户行">
        <el-input v-model="orgData.openBank" placeholder="开户行银行名称"></el-input>
      </el-form-item>
      <el-form-item label="户名">
        <el-input v-model="orgData.accountName" placeholder="户名"></el-input>
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="orgData.accountNo" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="联合担保协议签订日期">
        <el-date-picker
          v-model="orgData.joinDate"
          type="date"
          placeholder="联合担保协议签订日期"
          class="w-100 start-date-pick"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="联合担保协议编号">
        <el-input v-model="orgData.joinNo" placeholder="联合担保协议编号"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input type="textarea" :rows="5" v-model="orgData.orgDescription"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onOrgEdit">修 改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { putOrg } from '@/common/api/auth'

export default {
  components: {
    SelectAddress,
  },

  props: {
    visible: Boolean,
  },

  data() {
    return {
      images: '',
      // addressCode: '',
      rules: {
        orgName: [{ required: true, message: '请填写单位名称', trigger: 'blur' }],
        realName: [{ required: true, message: '请输入公司负责人', trigger: 'blur' }],
        addressCode: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        phoneNumber: [{ required: true, message: '请填写联系电话', trigger: 'blur' }],
        // orgNameShort: [{ required: true, message: '请填写单位简称', trigger: 'blur' }],
        // orgCode: [{ required: true, message: '请填写机构代码', trigger: 'blur' }],
      },
      loading: false,
      orgData: {},
    }
  },

  computed: {
    storeData() {
      return this.$store.getters.org
    },

    fileList: {
      set: function () {},
      get: function () {
        let images = this.storeData.orgImages
        if (images) {
          let arr = images.replace(/^\["(\S+)"\]$/, '$1').split('","')
          return arr.map(image => {
            return { name: '', url: image }
          })
        } else {
          return []
        }
      },
    },
  },

  watch: {
    storeData: {
      handler: function () {
        this.orgData = { ...this.storeData }
      },
      deep: true,
      immediate: true,
    },
  },

  created() {
    // this.addressCode = this.storeData.addressCode
  },

  mounted() {},

  methods: {
    onOrgEdit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$refs.upload.submit()
        } else {
          this.$message.error('输入错误，请重新填写!')
        }
      })
    },

    handleComplete(images) {
      this.images = images.length ? `["${images[0].url}"]` : ''
      this.putOrg()
    },

    putOrg() {
      let data = {
        orgImages: this.images,
        addressCode: this.orgData.addressCode,
        clientId: this.orgData.clientId,
        orgCode: this.orgData.orgCode,
        realName: this.orgData.realName,
        phoneNumber: this.orgData.phoneNumber,
        addressDetail: this.orgData.addressDetail,
        orgName: this.orgData.orgName,
        orgDescription: this.orgData.orgDescription,
        orgNameShort: this.orgData.orgNameShort,
        openBank: this.orgData.openBank,
        accountName: this.orgData.accountName,
        accountNo: this.orgData.accountNo,
        joinNo: this.orgData.joinNo,
        joinDate: this.orgData.joinDate,
      }
      this.loading = true
      putOrg(data)
        .then(res => {
          if (res.data > 0) {
            this.$emit('update:visible', false)
            this.$message.success('修改单位信息成功！')
            this.$store.dispatch('getOrg')
            this.$store.dispatch('getMe') // 页面右上角的userName需要更新getMe
          } else {
            this.$message.error('修改单位信息错误，请重试！')
          }
        })
        .catch(() => {
          this.$message.error('修改单位信息错误，请重试！')
        })
        .then(() => {
          this.loading = false
        })
    },

    handleClose() {
      this.orgData = { ...this.storeData }
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style scoped></style>
